<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>湖外湖点餐系统</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <meta name="description" content="Portfolio Zoom Slider with jQuery" />

        <meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>

		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />

		<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

		<script src="js/cufon-yui.js" type="text/javascript"></script>

		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		
 <style type="text/css">
    body{
		 
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Arial;
	 
      }
	  #container{
		width: 1368px;
		background: #f2f2f2;
		text-align: left;
		margin: 0px auto;

	  }
	  #hyh-bestup{
		  margin: 0px;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #444444;
	  }
	 #hyh-bestup-down1{
		  margin: 0px ;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down2{
		  margin:0px;
		  padding:0px;
		  height:42px;
		  line-height:42px;
	  }
	  #hyh-bestup-down3{
		  margin: 5px 90px 5px 0px ;
		  padding: 0px;
		  width:180px;
		  height:37px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down1 li,#hyh-bestup-down1 li a{
		  float:left;
		  line-height: 42px;
		  display: block;
		  text-align:center;
		  width:100px;
		  margin-left:140px;
		  padding:0px;
		  font-size:14px;
		  list-style-type: none;
		  text-decoration:none;
		  color:#FFF;
	  }
	  #hyh-bestup-down1 ul li a:hover{
		  color:#a6a6a6;
		  text-decoration:blink;
	  }
	  
	  #clear{
		  width:1368px;
		  height:0px;
		  clear:both;
	  }
	  #footer_line{
		  width:1268px;
		  border: 1px solid #b2b2b2;
		  margin:20px 100px 2px 100px;
		  padding:0px;
		  float:left;
		  clear:both;
	  }
	  #footer{
		  width:1368px;
		  height:12px;
		  margin:5px 100px;
		  float: left;
		  clear: both;
	  }
	  #footer_left{
		  width:230px;
		  height:12px;
		  margin:0px;
		  padding:3px;
		  float:left;
		  clear:both;
	  }
	  #footer_right{
		  width:800px;
		  height:14px;
		  margin:0px;
		  padding:0px;
		  float:left;
	  }
 </style> 


		<script type="text/javascript">

			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});

			

			Cufon.replace('.footer');

		</script>

    </head>

    <body>
    <div id="container">
	<div id="hyh-bestup">
    </div>
    <div id="hyh-bestup-down1">
	<ul>
		<div id="hyh-bestup-down3">
		<li><a href="own.html"><img src="images/hyh_text.png"></a></li>
		</div>
        <div id="hyh-bestup-down2">
		<li><a href="everybody.html">大众登录</a></li>
		<li><a href="#">VIP登录</a></li>
		<li><a href="#">关于我们</a></li>
        </div>
	</ul>
    </div>
   
    


		<div class="wrapper">

		    <div id="content" class="content">

				<div class="item">

					<div class="thumb_wrapper">

						<div class="thumb">

							<ul>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/dongyingongtang.png"><img src="images/thumbs/dongyingongtang.png" alt="Formstack 1"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/dongyingongtang.png"><img src="images/thumbs/dongyingongtang.png" alt="Formstack 2"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/dongyingongtang.png"><img src="images/thumbs/dongyingongtang.png" alt="Formstack 3"/></a></li>

							</ul>

						</div>

						<a class="prev" href="#"></a>

						<a class="next" href="#"></a>

						

					</div>

					<div class="description">

						<h2 >冬阴功汤</h2>

						<p>冬阴功汤， 也叫东炎汤，英文为Tom yum 或者tom yam, 是泰国和老挝的一道富有特色的酸辣口味汤品。主要食材有柠檬叶、香茅、虾等。冬阴功汤在泰国非常普遍。大小餐馆、普通人家常饮此汤，从而成为泰国菜的代表。同时，它也是在其他东南亚国家，如马来西亚，新加坡，印尼非常受欢迎的菜品。
                        </p>

                       


					</div>

				</div>
			</div>	

        </div>
				
				

				



				

		

		



		<!-- The JavaScript -->

		<script src="http://www.jq22.com/jquery/jquery-1.6.2.js"></script>

		<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>

		<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">

			$(function() {

				/*

				fancybox init on each cloud-zoom element

				 */

				$("#content .cloud-zoom").fancybox({

					'transitionIn'	:	'elastic',

					'transitionOut'	:	'none',

					'speedIn'		:	600,

					'speedOut'		:	200,

					'overlayShow'	:	true,

					'overlayColor'	:	'#000',

					'cyclic'		:	true,

					'easingIn'		:	'easeInOutExpo'

				});



				/*

				because the cloud zoom plugin draws a mousetrap

				div on top of the image, the fancybox click needs

				to be changed. What we do here is to trigger the click

				the fancybox expects, when we click the mousetrap div.

				We know the mousetrap div is inserted after

				the <a> we want to click:

				 */

				$("#content .mousetrap").live('click',function(){

					$(this).prev().trigger('click');

				});



				/*

				the content element;

				each list item / group with several images

				 */

				var $content	= $('#content'),

				$thumb_list = $content.find('.thumb > ul');

				/*

				we need to set the width of each ul (sum of the children width);

				we are also defining the click events on the right and left arrows

				of each item.

				 */

				$thumb_list.each(function(){

					var $this_list	= $(this),

					total_w		= 0,

					loaded		= 0,

					//preload all the images first

					$images		= $this_list.find('img'),

					total_images= $images.length;

					$images.each(function(){

						var $img	= $(this);

						$('<img/>').load(function(){

							++loaded;

							if (loaded == total_images){

								$this_list.data('current',0).children().each(function(){

									total_w	+= $(this).width();

								});

								$this_list.css('width', total_w + 'px');



								//next / prev events



								$this_list.parent()

								.siblings('.next')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == $this_list.children().length -1) return false;

									var	next	= ++current,

									ml		= -next * $this_list.children(':first').width();



									$this_list.data('current',next)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								})

								.end()

								.siblings('.prev')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == 0) return false;

									var	prev	= --current,

									ml		= -prev * $this_list.children(':first').width();



									$this_list.data('current',prev)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								});

							}

						}).attr('src',$img.attr('src'));

					});

				});

			});

        </script>

    </body>

</html>